//animation.module.ts
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {
  trigger, // 动画封装触发，外部的触发器
  state, // 转场状态控制
  style, // 用来书写基本的样式
  transition, // 用来实现css3的 transition
  animate, // 用来实现css3的animations
  keyframes // 用来实现css3 keyframes的
} from '@angular/animations';
// 动画时间线
/*var time = '300ms'
var styles = {
  ease: time + ' ease ',
  linear: time + ' linear ',
  easeIn: time + ' ease-in',
  easeOut: time + ' ease-out',
  stepStart: time + ' step-start',
  stepEnd: time + ' step-end',
  easeInOut: time + ' ease-in-out',
  faseOutSlowIn: time + ' cubic-bezier(0.4, 0, 0.2, 1)',
  inOutBack: time + ' cubic-bezier(0.68, -0.55, 0.27, 1.55)',
  inOutCubic: time + ' cubic-bezier(0.65, 0.05, 0.36, 1)',
  inOutQuadratic: time + ' cubic-bezier(0.46, 0.03, 0.52, 0.96)',
  inOutSine: time + ' cubic-bezier(0.45, 0.05, 0.55, 0.95)'
}*/

// 动画配置

/*var opts = {
  fadeIn: [
    style({ opacity: 0 }),
    animate(styles.inOutBack, style({ opacity: 1,width: '*', offset: 1  })),
  ],
  fadeOut: [
    style({ opacity: 1 }),
    animate(styles.inOutBack, style({ opacity: 0 }))
  ],
  shrink: [
    style({ height: '*' }),
    animate(styles.inOutBack, style({ height: 0 }))
  ],
  stretch: [
    style({ height: '0' }),
    animate(styles.inOutBack, style({ height: '*' }))
  ],
  flyIn: [
    style({ transform: 'translateX(-100%)' }),
    animate(styles.inOutBack, style({ transform: '*' }))
  ],
  flyOut: [
    style({ transform: '*' }),
    animate(styles.inOutBack, style({ transform: 'translateX(-100%)' }))
  ],
  zoomIn: [
    style({ transform: 'scale(.5)' }),
    animate(styles.inOutBack, style({ transform: '*' }))
  ],
  zoomOut: [
    style({ transform: '*' }),
    animate(styles.inOutBack, style({ transform: 'scale(.5)' }))
  ]
}*/

// 导出动画时间线定义,供自定义动画的时候使用
//export const animStyle = styles

// 导出动画
export const fadeIn = [trigger('fadeIn', [
  state('in', style({display: 'none'})), // 默认元素不展开
  transition('void => *', [ // 进场动画
    animate(500, keyframes([
      style({opacity: 0}), // 元素高度0，元素隐藏(透明度为0)，动画帧在0%
      style({opacity: 1}) // 200ms后高度自适应展开，元素展开(透明度为1)，动画帧在100%
    ]))
  ]),
  transition('* => void', [
    animate(500, keyframes([
      style({opacity: 1}), // 与之对应，让元素从显示到隐藏一个过渡
      style({opacity: 0})
    ]))
  ]),
])]


/*export const simAnim = [
  trigger('simAnim', [
    transition('* => fadeIn', opts.fadeIn),
    transition('* => fadeIn', opts.fadeOut),
    transition('* => shrink', opts.shrink),
    transition('* => stretch', opts.stretch),
    transition('* => flyIn', opts.flyIn),
    transition('* => flyOut', opts.flyOut),
    transition('* => zoomIn', opts.zoomIn),
    transition('* => zoomOut', opts.zoomOut)
  ])
]*/
